<!DOCTYPE html>
<html lang="en">
   
  <head>
  
    <meta charset="UTF-8" />
       
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
       
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       
    <title>作业2</title>

    <script src="info.js"></script>
 
 

  </head>
   
  <body>
    <h3 style="color: #2420b5 ;">欢迎注册会员</h3>
    <form action="homework.html" method="post">
      <p>手机号码：<input type="tel" name="phone" placeholder="11位手机号" maxlength="11" required="必填" ><span>必填</span> <br></p>
创建密码：<input type="password" name="pwd" placeholder="8位密码" required="必填" span ="8"><span id="1">必填</span><br>
 <style>
  span {
    color: red;
  }
      </style>
输入邮箱：<input type="email" name="email" ><br>
验证码：<input type="text"><br>
性别： 
<label ><input type="radio" name="sex" value="male" checked="checked">男</label>
<label><input type="radio" name="sex" value="female" >女<br></label>

生日：<input type="date" name="mydate"><br>
年龄：<input type="age"><br>
籍贯：
       
    <select name="province" id="province" onchange="getCity()">
           
      <option value="">省份</option>
           
      <!-- 利用js把省份添加到下拉列表里-->
           
      <script type="text/javascript">
        for (var i = 0; i < provinceArr.length; i++) {
          document.write(
            "<option value='" + i + "'>" + provinceArr[i] + "</option>"
          );
        }
      </script>
         
    </select>
       
    <select name="city" id="city">
           
      <option value="">城市：</option>
         
    </select><br>
     
    学历：<select name="degree" id="">
      <option value="0">大专</option>
      <option value="1" selected="selected">本科</option>
      <option value="2">硕士</option>
      <option value="">博士</option>
    </select><br>
  薪资：
  <input type="range" id="pay" name="pay" min="3000" max="30000">
  <span id="msg"></span><br>
  个人爱好：
  <label for=""><input type="checkbox" name="like" value="sing">唱歌 </label>
  <label for=""><input type="checkbox" name="like" value="dance">跳舞</label>
  <label for=""><input type="checkbox" name="like" value="swim">游泳</label>
<br>
<form method="post" action="#" enctype="multipart/form-data">
  <p>图片预览：</p>
  <p></p>
  <div id="test-image-preview" style="border: 1px solid silver; width: 100%; height: 200px; background-repeat: no-repeat; 
  background-position: center;">
  </div>
  <p></p>
  <p>
  <input type="file" id="test-image-file" name="test">
  </p>
  <p id="test-file-info">没有选择文件</p>
  </form>
  <!-- 个人简介模块 -->
  <div>
      个人简介：
      <textarea name="intro" cols="50" rows="10" style="vertical-align:middle"></textarea> 
  </div>
  <button type="submit"> 提交 </button>
  <button type="reset"> 重填 </button>
</form>
  </body>
  <!-- 1 联动籍贯显示js代码 -->
  <script>
    //当省份的选择发生变化时调用 该方法   将市县加载到下拉选择框
    function getCity() {
      //1.获取省份选择框的对象
      var provincesobj = document.getElementById("province"); //2.获取市县选择框的对象
      var cityobj = document.getElementById("city"); //3.获取被选择的省份的索引
      var index = provincesobj.selectedIndex; //   alert(provincesobj[index].value + "," + provincesobj[index].text); //4.通过省份的索引获取它的value值，value值也是它在数组的索引值

      var value = provincesobj[index].value; //5.获取对应省份的市县数组

      var cityName = cityArr[value]; //   alert(cityName); //6.将下拉框清楚索引为0之后的，只保留第一个
      cityobj.length = 1; //通过循环遍历市县元素给下拉框赋值
      for (var i = 1; i < cityArr[value].length; i++) {
        cityobj.options[cityobj.options.length] = new Option(cityName[i], i);
      }
    }
  </script>
  <!-- 2薪资滑块显示js代码 -->
  <script>
    var msg = document.getElementById("msg"); // 根据id值找到span元素
    window.onload = function () { 
    msg.innerHTML = document.getElementById("pay").value; // 获取区间域初始value值
    }
    document.getElementById("pay").onchange = function () { 
    msg.innerHTML = this.value; // 将当前区间域的value作为span元素的内容
    }
    </script>
    <!-- 3 预览图片的js代码 -->
    <script>
      var fileInput = document.getElementById('test-image-file');
      var info = document.getElementById('test-file-info');
      var preview = document.getElementById('test-image-preview'); 
      fileInput.addEventListener('change', function () { // 监听change事件
      preview.style.backgroundImage = ''; // 清除背景图片
      if (!fileInput.value) {
      info.innerHTML = '没有选择文件';
      return;
      } 
      var file = fileInput.files[0]; // 获取File引用
      // 获取File信息:
      info.innerHTML = '文件: ' + file.name + '<br>' + '大小: ' + file.size + '<br>' + '修改: ' + file.lastModifiedDate;
      if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
      alert('不是有效的图片文件!');
      return;
      } 
      var reader = new FileReader(); // 读取文件
      reader.onload = function (e) { // 发起一个异步操作来读取文件内容
      var data = e.target.result; // data串形如： '...(base64编码)...' 
      preview.style.backgroundImage = 'url(' + data + ')';
      }; 
      reader.readAsDataURL(file); // 以DataURL的形式读取文件
      });
      </script>
</html>
